<template>
	<el-affix>
		<el-menu
			:default-active="activeIndex"
			class="el-menu"
			mode="horizontal"
			:ellipsis="false"
			router
		>
			<el-menu-item index="1" :route="route_tap.index" v-if="!isAdmin"
				>首页</el-menu-item
			>
			<el-menu-item index="2" :route="route_tap.userState" v-if="!isAdmin"
				>预报名</el-menu-item
			>
			<el-menu-item index="3" :route="route_tap.manage" v-if="isAdmin"
				>管理页面</el-menu-item
			>
			<el-menu-item index="4" :route="route_tap.register" v-if="isAdmin"
				>注册页面</el-menu-item
			>
			<div class="flex-grow"></div>
			<div>
				<el-menu-item>
					<router-link
						v-if="!$store.getters.user"
						:to="route_tap.student_login"
					>
						登录
					</router-link>
					<el-sub-menu index="0" v-else>
						<template #title>
							<div v-if="isAdmin">管理员</div>
							<div v-else>{{ $store.getters.user.studentName }}</div>
						</template>
						<el-menu-item index="0-2" route="/login" @click="logout"
							>注销
						</el-menu-item>
					</el-sub-menu>
				</el-menu-item>
			</div>
		</el-menu>
	</el-affix>
</template>

<script>
export default {
	name: "TheNavigation",
	components: {},
	data() {
		return {
			activeIndex: "/1",
			route_tap: {
				index: {
					name: "index",
				},
				student_login: {
					name: "login",
				},
				manage: {
					path: "/manage",
				},
				userState: {
					name: "bm",
				},
				register: {
					name: "register",
				},
			},
		};
	},
	methods: {
		logout() {
			this.$store.commit("logout");
		},
	},
	computed: {
		isAdmin() {
			return this.$store.getters.user?.isAdmin;
		},
	},
};
</script>

<style scoped>
a {
	text-decoration: none;
}
</style>
